<template>
	<view class="flex-column page">
		<custom-navigation title="商品单位" :rightImg="!isDrag?'/static/add.png':null" :rightTxt="isDrag?'保存':null"
			@rightAction="saveSort"></custom-navigation>

		<view class="search-box flex-row-center">
			<image src="../../static/search.png"></image>
			<input placeholder="单位名称" placeholder-style="color: rgba(153, 153, 153, 1);" v-model="searchStr"
				@confirm="onSearch"  @input="input_val=true" @focus="input_val=true" @blur="input_val=false" confirm-type="search" type="text"    @keydown.enter="onSearch" />
		</view>

		<scroll-view :scroll-y="true" class="list">
			<HM-dragSorts :list="list" :isDrag="isDrag" :autoScroll="true" :feedbackGenerator="true" :longTouch="isDrag"
				:listHeight="listHeight" :rowHeight="100" @change="change" @confirm="confirm" @onclick="onclick">
			</HM-dragSorts>
		</scroll-view>
		<view class="bottom flex-column-center" v-if="!input_val && !isDrag" @click="isDrag=true">
			<view class="btn">排序</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				classifycations: [],
				listHeight: 100,
				list: [],
				moveList: [],
				isDrag: false,
				selectMode: false,
				searchStr: '',
				input_val:false,
			}
		},
		onLoad(options) {
			this.selectMode = options.selectMode ?? false
			this.getData();
		},
		onShow() {
			if (uni.getStorageSync("refresh")){
				this.getData();
				uni.setStorageSync("refresh", null);
			}
		},
		methods: {
			onSearch(e) {
				this.getData()
			},
			saveSort() {
				if (this.isDrag == false) {
					uni.navigateTo({
						url: '/pages/goods/baseinfo/add_goods_unit'
					})
				} else {
					this.isDrag = false;

				if(this.moveList.length==0)return;
					uni.showLoading({
						title: "加载中..."
					})

					let params = [];
					for (let i in this.moveList) {
						params.push({
							"serviceName": "srvretail_store_unit_update",
							"condition": [{
								"colName": "id",
								"ruleType": "eq",
								"value": this.moveList[i].id
							}],
							"data": [{
								"serial_no": i
							}]
						})
					}

					this.$apiPost("/retail/operate/srvretail_store_unit_update", params).then(res => {
						uni.hideLoading()
						if (res.state == 'SUCCESS') {
							uni.showToast({
								title: "修改成功！",
								mask: true
							})
							 
						}
					})
				}

			},
			getData() {
				this.$apiPost("/retail/select/srvretail_store_unit_select", {
					"serviceName": "srvretail_store_unit_select",
					"colNames": ["*"],
					"condition": this.searchStr.length > 0 ? [{
						"colName": "unit_name",
						"ruleType": "like",
						"value": this.searchStr
					}] : [],
					"order": [],
					"page": {
						"pageNo": 1,
						"rownumber": 430
					}
				}).then(res => {
					for (let i in res.data) {
						res.data[i].name = res.data[i].unit_name
					}
					this.list = res.data;
					this.listHeight = this.list.length * 120;
				})
			},
			onclick(e) {
				console.log('=== onclick start ===');
				console.log("被点击行: " + JSON.stringify(e.value));
				console.log("被点击下标: " + JSON.stringify(e.index));
				console.log('=== onclick end ===');
				if (this.selectMode) {
					var pages = getCurrentPages(); // 获取页面栈
					var currPage = pages[pages.length - 1]; // 当前页面
					var prevPage = pages[pages.length - 2]; // 上一个页面
					prevPage.goods_unit = this.list[e.index]
					uni.navigateBack()
					return
				}
				//修改
				let item = this.list[e.index]
				if(item.is_topping=="是"){
					return;
				} 
				uni.navigateTo({
					url: `/pages/goods/baseinfo/add_goods_unit?id=${item.id}&name=${item.name}&currentNo=${item.unit_no}`
				})
			},
			change(e) {
				console.log('=== change start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== change end ===');
			},
			confirm(e) {
				console.log('=== confirm start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== confirm end ===');
				console.log('list', e.list);
				this.moveList = e.list
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		padding-left: 42rpx;
		margin: 12rpx;
		width: 700rpx;
		height: 40px;
		opacity: 1;
		border-radius: 80rpx;
		background: rgba(255, 255, 255, 1);

		image {
			width: 40rpx;
			height: 40rpx;
		}

		input {
			flex: 1;
			margin-left: 8rpx;
			font-size: 28rpx;
			font-weight: 500;

			text-align: left;
			vertical-align: top;
		}
	}

	.list {
		flex: 1;
		height: 500rpx;
	}

	.bottom {
		width: 100%;
		height: 146rpx;
		justify-content: center;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 -32rpx 32rpx 3rpx rgba(245, 245, 247, 1);
		z-index: 1;

		.btn {
			width: 320rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
		}
	}
</style>
